<template>
    <div>
        <van-tabs class="myTabBox" :class="{'itemSpace':space}" @change="onClickTab" v-model:active="modelValue">
            <van-tab v-for="dt in lists" :key="dt.name" :title="dt.title" :name='dt.name'></van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import { Tab as vanTab, Tabs as vanTabs} from "vant";
export default {
    props:['modelValue','lists','space'], // space：tab之间是否留空隙
    components:{
       vanTab,
       vanTabs,
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            active:props.modelValue
        })
        const onClickTab = name=>{
            context.emit('update:modelValue', name)
            context.emit('change',name)
        }

        return{
            ...toRefs(state),
            onClickTab
        }
    }
}
</script>

<style lang="scss">
    .myTabBox{
        .van-tabs__nav{
            background: none;
            .van-tab{
                font-size: 32px;
                color: #fff;
                font-weight: 500;
                position: relative;
                z-index: 100;
                &::after{
                    content: '';
                    display: block;
                    position: absolute;
                    z-index: 100;
                    left: 0;
                    bottom: 0;
                    height: 4px;
                    width: 100%;
                    background: #FFFFFF;
                }
                &.van-tab--active{
                    color: var(--baseColor);
                  &::after{
                    background: var(--baseColor);  
                  }  
                }
            }
            .van-tabs__line{
                display: none;
            }
        }
        &.itemSpace{
            .van-tab{
                margin-left: 1px;
                margin-right: 1px;
            }
        }
    }
</style>